<template>
  <div class="bigBox">
    <el-table
      id="table1"
      :data="state.tableData"
      style="width: 100%,font-weight:bold,"
    >
      <el-table-column prop="id" label="UID" align="center"> </el-table-column>
      <el-table-column prop="img" label="头像">
        <template #default="scope">
          <el-avatar shape="square" :size="50" :src="scope.row.headimg" />
        </template>
      </el-table-column>

      <el-table-column prop="name" label="用户名称" align="center">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="联系电话"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="vnum"
        label="微信号"
        align="center"
      ></el-table-column>
      <el-table-column prop="time" label="注册时间" align="center">
        <template #default="scope">
          {{ dayjs(scope.row.time).format("YYYY-MM-DD hh:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column prop="buyNum" label="购买件数" align="center">
        <template #default="scope">
          {{ scope.row.buyNum }}{{ scope.row.buyNum === null ? " " : "件" }}
        </template>
      </el-table-column>
      <el-table-column prop="expend" label="消费金额" align="center">
        <template #default="scope">
          {{ scope.row.expend }}{{ scope.row.expend === null ? "" : "元" }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from "vue";
// 引入时间处理工具
import dayjs from "dayjs";

// 引入用户数据仓库
import useDataStore from "@/stores/user";
// 将state从仓库中解构出来
const { state } = useDataStore();
</script>
<style lang="less" scoped>
.bigBox {
  width: 100%;
  box-shadow: 0px 0px 20px rgb(0 0 0 / 20%);
  :deep(.el-table thead) {
    height: 60px;
    font-size: 14px;
  }
}
.demo-basic .demo-basic--circle,
.demo-basic .demo-basic--square {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
